<template>
  <div>
    <div class="uploadImage-box">
      <div class="showImage_new" :key="index" v-for="(item,index) in uploadVideoArr" @click="handleEnlarge(item,index)">
        <div :style="{backgroundImage:'url('+item.imgUrl+')',width:width+'px',height:height+'px'}">
          <video :src="item.url"  controls="controls"></video>
        </div>
        <div class="uploadBg_new">
          <span class="uploadBg_new_icon_x" @click.stop="deleteVideo(item.id)">×</span>
        </div>
      </div>
      <div class="uploadBtn" v-if="uploadVideoArr.length<maxLength" :style="{width:width+'px',height:height+'px'}">
        <common-icon type="_shangchuan" :size="26"></common-icon>
        <p class="introText">{{introText}}</p>
        <input id="uploaderInput" class="uploader-input"
        type="file" name="files" @click="clearFile" @change="uploadVideo($event)" />
      </div>
    </div>
  </div>
</template>
<script>
import commonIcon from "_c/common-icon/common-icon.vue"
export default {
  props:{
    uploadVideoArr:{
      type: Array,
      default: () => {
          return [];
      }
    },
    width:{
      type:Number,
      default:180
    },
    height:{
      type:Number,
      default:120
    },
    maxLength:{
      type:Number,
      default:3
    },
    introText:{
      type:String,
      default:''
    },
  },
  components: {
    commonIcon
  },
  data() {
    return {
      uploadVideoArr: [],

    }
  },
  methods: {
    uploadVideo() {

    },
    deleteVideo(id) {

    },
  }
}
</script>
<style lang="less" scoped>

</style>
<style lang='less' scoped>
   @import '../../less/variable.less';
    .uploadImage-box{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        &>div{
            border-radius: 5px;
            overflow: hidden;
            margin-right: 15px;
            margin-bottom: 15px;
        }
        .showImage{
            display: flex;
            position: relative;
            &:hover{
                .uploadBg{
                    display: flex;
                }
            }
            .uploadBg{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.6);
                display: none;
                justify-content: center;
                align-items: center;
                .iconfont{
                    color: #ffffff;
                    font-size: 36px;
                    padding: 0 5px;
                    cursor: pointer;
                    &:hover{
                        color: @mainColor;
                    }
                }
            }
            .uploadImg{
                 background-position: center;
                 background-size: cover;
                 border: 1px dashed #e5e5e5;

                img{
                    width: 100%;
                }
            }
        }
        // 改版后的样式
        .showImage_new {
          display: flex;
          position: relative;
          overflow: visible;
          .uploadImg_new{
              background-position: center;
              background-size: cover;
              border: 1px dashed #e5e5e5;
            img{
                width: 100%;
            }
          }
          // 此时的删除图标应该定位在右上角
          .uploadBg_new {
            position: absolute;
            right: -5px;
            top: -5px;
            background-color: black;
            width: 20px;
            height: 20px;
            text-align: center;
            vertical-align: middle;
            // background: rgba(0, 0, 0, 0.6);
            color: #fff;
            border-radius: 50%;
            
            span {
              width: 20px;
              height: 20px;
              line-height: 20px;
              display: inline-block;
              font-size: 18px;
              cursor: pointer;
            }
            .icon-shanchu:before {
              display: block;
              font-size: 23px;
            }
            .uploadBg_new_icon_x {
              display: block;
              font-size: 23px;
            }
          }
        }
        .uploadBtn{
            position: relative;
            cursor: pointer;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            border: 1px dashed #e5e5e5;
            &:hover{
                border-color:@mainColor;
                .iconfont{
                    color: @mainColor;
                }
            }
            &>.iconfont {
              color: #474747;
            }
            .uploader-input{
                position: absolute;
                z-index: 2;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
            }
        }

    }
</style>